<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.userId" class="userItme">
        <div class="fl">
          <img
            class="h-scu fl"
            :src="user.avatarUrl"
            alt=""
            @click="toHomePage(user.userId, user.identity)"
          />
        </div>
        <div class="fl userBody">
          <div class="clearfix">
            <span class="userName fl">{{ user.nickName }}</span>
            <div class="clearfix fl" v-if="user.identity == 1">
              <img
                class="fl"
                src="@/assets/认证.png"
                style="width: 15px; margin: 3px"
                alt=""
              />
            </div>
          </div>
          <div class="clearfix">
            <span class="userMsg">文章{{ user.articleCount }}</span>
            <span class="userMsg">评论{{ user.commentCount }}</span>
            <span class="userMsg">点赞{{ user.goodCount }}</span>
          </div>
          <div class="clearfix">
            <p class="userProfile">{{ user.signature }}</p>
          </div>
        </div>
      </li>
    </ul>
    <div style="margin-top: 20px">
      <el-pagination
        :current-page="currentPage"
        :total="totalRecords"
        :page-size="limit"
        :page-sizes="[6, 12, 18, 24, 28, 36, 42]"
        style="margin: 30px 0; text-align: center"
        layout="sizes,prev,pager,next,jumper,->,total,slot"
        @current-change="changeCurrentPage"
        @size-change="changeSize"
      />
    </div>
  </div>
</template>

<script>
import searchApi from "@/api/searchApi";
export default {
  name: "users",
  data() {
    return {
      currentPage: 1,
      totalRecords: 100,
      limit: 6,
      userList: [],
    };
  },
  created() {
    this.search();
  },
  methods: {
    toHomePage(userId, identity) {
      this.$router.push({
        name: "mypost",
        params: {
          visitedUserId: userId,
          identity: identity,
        },
      });
    },
    changeSize(size) {
      this.limit = size;
      this.search();
    },
    changeCurrentPage(currentPage) {
      this.changeCurrentPage = currentPage;
      this.search();
    },
    search() {
      var nickName = sessionStorage.getItem("searchInput");
      if (nickName != null) {
        this.selectPerson(nickName);
      }
    },
    selectPerson(nickName) {
      searchApi.selectPerson(nickName).then((response) => {
        this.userList = response.data;
      });
    },
  },
};
</script>

<style>
.userItme {
  height: 80px;
  /* background-color: pink; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.h-scu {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin: 20px;
}
.userBody {
  height: 80px;
  padding: 10px 0;
}
.userName {
  /* padding-top: 10px; */
}
.userMsg {
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
  margin-right: 15px;
}
.userProfile {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}
</style>
